<template>
<div   class="main-container">
  <layout :search="false">
    <template slot="operation">
      <div class="operation-left">
        <el-button type="primary" icon="el-icon-plus" @click="handleEdit" v-if="$checkAuth('供应商管理')">添加供应商</el-button>
      </div>
    </template>
    <template slot="content">
      <div class="h-100percent overflow-auto">
      <el-table border stripe :data="supplierList" v-loading="loading" @row-dblclick="rowDoubleClick">
        <el-table-column prop="id" type="index" fixed label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="supplierFullName" fixed label="供应商全称" align="left" header-align="center" width="300"></el-table-column>
        <el-table-column prop="supplierShortName" fixed label="供应商简称" align="center" width="150"></el-table-column>
        <el-table-column prop="address" fixed label="地址" align="center" width="180"></el-table-column>
        <el-table-column prop="telephone" label="电话" align="center" min-width="100"></el-table-column>
        <el-table-column prop="mail" label="邮箱" align="center" min-width="80"></el-table-column>
        <el-table-column prop="principal" label="联系人" align="center" min-width="60"></el-table-column>
        <!-- <el-table-column prop="state" label="状态" align="center" min-width="60"></el-table-column> -->
        <el-table-column prop="outsource" label="外协" align="center" min-width="50">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.outsource ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="purchase" label="外购" align="center" min-width="50">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.purchase ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operation" align="center" fixed="right" width="180" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" v-if="$checkAuth('供应商管理')">修改</el-button>
            <el-button type="primary" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" v-if="$checkAuth('供应商管理')">删除</el-button>
          </template>
        </el-table-column>
        <third-review ref="third" @fetchData="fetchData" :formData="formData"></third-review>
      </el-table>
      </div>
    </template>
  </layout>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { State, namespace, Action, Mutation } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import ThirdReview from './thirdReview.vue'
import { selectSupplierList, deleteSupplierList } from '@/api/interface1'
import { Message } from 'element-ui'
import {get} from 'lodash'
@Component<Index>({
  components: {
    Layout,
    ThirdReview
  },
  created() {
    this.fetchData()
  }
})
export default class Index extends Vue {
  public $refs!: {
    third: any
  }
  visible: boolean = false
  loading: boolean = false

  formData = {
    supplierFullName: '',
    supplierShortName: '',
    address: '',
    telephone: '',
    mail: '',
    principal: '',
    outsource: true,
    purchase: false,
    state:'',
  }

  supplierList: any[] = []


async fetchData() {
    this.loading = true
    const res =await selectSupplierList().catch((err: any) => {
            Message.error(err)
    })
      let data =get(res,'data',[])
      console.log({data})
      this.supplierList = data
      this.loading = false
  }


  rowDoubleClick(row) {
    console.log(row.id)
  }

  handleEdit(index, row) {
    if (row) {
      this.formData = row
    } else {
      this.formData = {
        supplierFullName: '',
        supplierShortName: '',
        address: '',
        telephone: '',
        mail: '',
        principal: '',
        purchase: false,
        outsource: true,
        state:'',
      }
    }

    this.$refs.third.open(this.formData)
  }

  handleDelete(index, row) {
    const { id } = row
    const params = {
      id: id
    }
    this.$alert('您确定删除本记录？', '错误提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        // this.$message({
        //   type: 'info',
        //   message: `action: ${action}`
        // })
        if (action === 'confirm') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })

            .then(() => {
              //想后端传递删除数据id
              deleteSupplierList(params).then(res => {
                if (res) {
                  Message.success('删除成功')
                  this.fetchData()
                  this.visible = false
                }
              })
              //   rows.splice(index, 1)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped></style>
